<template>
  <div class="martop dr_table">
    <!-- 查询栏 -->
    <el-card class="marginBom">
      <el-form
        :model="minForm"
        ref="minForm"
        :label-width="minForm.width?minForm.width:'60px'"
        class="demo-ruleForm"
        v-if="searchList.length>0"
      >
        <el-form-item
          :label="item.label"
          :prop="item.prop"
          v-for="item in searchList"
          :key="item.prop"
          class="fl"
          style="margin-right:20px;"
        >
          <div v-if="item.com==='input'">
            <el-input :type="item.inputType" v-model="minForm[item.prop]" class="maxWidth"></el-input>
          </div>
          <div v-else-if="item.com==='select'">
            <el-select v-model="minForm[item.prop]" class="maxWidth" clearable>
              <el-option
                v-for="itemSelect in item.options"
                :key="itemSelect.value"
                :label="itemSelect.label"
                :value="itemSelect.value"
              ></el-option>
            </el-select>
          </div>
          <div v-else-if="item.com==='cascader'">
            <el-cascader v-model="minForm[item.prop]" :options="item.options" :props="item.props" clearable></el-cascader>
          </div>
          <div v-else-if="item.com==='date'">
            <el-date-picker
              v-model="minForm[item.prop]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-button type="primary" @click="toSearch" class="btnWidth">
          <i class="iconfont iconCP_search"></i>
          查询
        </el-button>
      </el-form>
    </el-card>
    <el-card>
      <!-- 操作栏 -->
      <div class="marginBom fr">
        <div class="disflex">
          <div v-if="sendBtn" class="dr_selectBtn">
            <el-select
              v-model="item.value"
              :style="item.style"
              v-for="(item,index) in sendBtn"
              :key="index"
              style="margin-right:10px;"
              @change="selectChange(item)"
            >
              <el-option
                v-for="itemSelect in item.options"
                :key="itemSelect.value"
                :label="itemSelect.label"
                :value="itemSelect.value"
              ></el-option>
            </el-select>
          </div>
          <div v-if="handleBtn">
            <el-button
              class="btnWidth"
              @click="toHandle(item)"
              v-for="item in handleBtn"
              :key="item.label"
              :type="item.type"
              :style="item.style"
            >{{item.label}}</el-button>
          </div>
        </div>
      </div>
      <!-- 表格部分 -->
      <el-table
        :data="minTable.tableData"
        :header-cell-style="{background:'#F4F7FB'}"
        style="width: 100%;"
        v-loading="minTable.loading"
        lazy
        row-key="id"
        :load="load"
        :default-expand-all="defaultExpandAll"
        :tree-props="minTable.treeProps"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <template v-for="colItem in cols">
          <!-- 按钮 -->
          <template v-if="colItem.type==='btn'">
            <el-table-column
              :label="colItem.label"
              :key="colItem.type"
              :width="colItem.width"
              :fixed="colItem.fixed"
              :align="colItem.align"
            >
              <template slot-scope="scope">
                <div class="btn-data">
                  <div v-for="btnItem in colItem.btnData" :key="btnItem.operatTitle">
                    <!-- 其他操作（删、改、查、下载等） -->
                    <el-button
                      :size="btnItem.size?btnItem.size:'mini'"
                      :type="btnItem.type"
                      @click="handleOperator(scope.$index, scope.row,btnItem.operatTitle)"
                      :style="btnItem.style"
                      style="margin-right:10px;"
                    >
                      <i
                        class="icon-menu-item"
                        :class="'iconfont icon' + btnItem.iconName"
                        v-if="btnItem.iconName"
                        style="margin-right:4px;"
                      ></i>
                      {{btnItem.operatTitle}}
                    </el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </template>
          <!-- 可勾选 -->
          <template v-else-if="colItem.type==='selection'">
            <el-table-column
              type="selection"
              :key="colItem.type"
              :width="colItem.width"
              :align="colItem.align"
              :fixed="colItem.fixed"
            ></el-table-column>
          </template>
          <!-- 可开关 -->
          <template v-else-if="colItem.type==='switch'">
            <el-table-column
              :key="colItem.prop"
              :label="colItem.label"
              :width="colItem.width"
              :fixed="colItem.fixed"
              :align="colItem.align?colItem.align:'center'"
              :prop="colItem.prop"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row[colItem.prop]"
                  :disabled="colItem.disabled"
                  active-color="#EA5404"
                  inactive-color="#CDCDCD"
                  @change="switchChange($event,scope.row)"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </template>
            </el-table-column>
          </template>
          <!-- 显示标签 -->
          <template v-else-if="colItem.type==='label'">
            <el-table-column
              :key="colItem.type"
              :width="colItem.width"
              :align="colItem.align?colItem.align:'center'"
              :fixed="colItem.fixed"
              :prop="colItem.prop"
              :label="colItem.label"
            >
              <template slot-scope="scope">
                <div class="disflex" style="flex-wrap: wrap;">
                  <div
                    v-for="(item,index) in scope.row[colItem.prop]"
                    :key="index"
                    class="labelText"
                  >
                    <el-tooltip
                      v-if="item.hasRemark"
                      class="item"
                      effect="dark"
                      :content="item.remark"
                      placement="top"
                    >
                      <span style="cursor:pointer;text-decoration: underline;">{{item.label}}</span>
                    </el-tooltip>
                    <span v-else>{{item.label}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </template>
          <!-- 表头可控 -->
          <template v-else-if="colItem.type==='header'">
            <el-table-column
              show-overflow-tooltip
              :key="colItem.prop"
              :label="colItem.label"
              :width="colItem.width"
              :fixed="colItem.fixed"
              :align="colItem.align?colItem.align:'left'"
              :prop="colItem.prop"
            >
              <template slot="header" slot-scope="slot">
                <div style="cursor:pointer;" class="disflex">
                  <span
                    @click="toExpand(colItem,colItem.ep)"
                    style="color:#223E54;font-weight:normal;"
                  >
                    <i class="iconfont iconCP_zhankai" style="margin-right:4px;"></i>
                    {{colItem.ep?"展开":"收起"}}
                  </span>
                  {{colItem.label}}
                </div>
              </template>
            </el-table-column>
          </template>
          <!-- 其他 -->
          <template v-else>
            <el-table-column
              show-overflow-tooltip
              :key="colItem.prop"
              :label="colItem.label"
              :width="colItem.width"
              :fixed="colItem.fixed"
              :align="colItem.align?colItem.align:'left'"
              :prop="colItem.prop"
            ></el-table-column>
          </template>
        </template>
      </el-table>
      <!-- 分页 -->
      <div class="table-page" v-if="pageInfo.show">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next,slot"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "min-table",
  props: {
    // 大表格属性配置
    minTable: {
      default: () => ({
        tableData: [],
        defaultExpandAll: false
      })
    },
    // 表头数据
    cols: {
      default: Array
    },
    // 操作栏按钮数组
    handleBtn: {
      default: Array
    },
    sendBtn: {
      default: Array
    },
    // 查询栏数组
    searchList: {
      default: Array
    },
    // 查询栏表单
    minForm: {
      default: Object
    },
    // 分页
    pageInfo: {
      default: Object
    }
  },
  data() {
    return {
      defaultExpandAll: false
    };
  },
  watch: {
    "minTable.defaultExpandAll": {
      handler: function(val) {
        this.defaultExpandAll = val;
      }
    }
  },
  methods: {
    // 查询
    toSearch() {
      this.$emit("min-search");
    },
    // 开关变化
    switchChange(val,row) {
      this.$emit("min-switch",val,row);
    },
    // 表格按钮操作
    handleOperator(index, row, operatTitle) {
      this.$emit("min-operator", index, row, operatTitle);
    },
    // 操作栏
    toHandle(i) {
      this.$emit("min-handle", i);
    },
    // 树形懒加载
    load(tree, treeNode, resolve) {
      this.$emit("min-load", tree, treeNode, resolve);
    },
    // 单选事件
    handleSelect(selection, row) {
      this.$emit("min-select", selection, row);
    },
    // 多选事件
    handleSelectAll(selection) {
      this.$emit("min-select-all", selection);
    },
    // 分页事件
    handleSizeChange(val) {
      this.$emit("min-size", val);
    },
    handleCurrentChange(val) {
      this.$emit("min-page", val);
    },
    // 全部展开/收起
    toExpand(colItem, val) {
      this.$emit("min-expand", colItem, val);
    },
    // 下拉框改变方法
    selectChange(val) {
      this.$emit("min-schange", val);
    }
  }
};
</script>
<style scoped>
.btn-data {
  display: flex;
}
.table-page {
  margin-top: 10px;
  float: right;
  padding-bottom: 15px;
}
.btn-group {
  margin-bottom: 15px;
}
.btn-group >>> .el-button {
  width: 100px;
  height: 36px;
}
.dr_table >>> .el-icon-arrow-right:before {
  content: "\e791";
}
.dr_selectBtn >>> .el-input__inner {
  border: 0;
  padding: 0;
}
.labelText span {
  margin: 4px;
  font-size: 12px !important;
  color: #2daedf;
  background: #EAF6FB;
  padding: 2px 5px;
  
}
</style>
